<template>
    <div class="PersonMessage1">
        <!-- 头部 -->
		<Header :navActive="-1" ref="Header"/>
		<!-- 内容区域 -->
		<div class="main cl">
            <!-- banner -->
            <div class="banner"></div>
            <!-- block -->
            <div class="block w1200">
                <div class="left fl">
                    <div class="title">消息中心</div>
                    <ul>
                        <router-link class="active" tag="li" :to="{name:'PersonMessage1'}">系统通知</router-link>
                        <router-link tag="li" :to="{name:'PersonMessage'}">应聘进度通知</router-link>
                    </ul>
                </div>
                <div class="right fr">
                    <div class="list">
                        <div class="item" v-for="(item,index) in list" :key="index" @click="openDetails(item.newsType,item.id,item.objId)">
                            <div class="icon"><i class="el-icon-message-solid"></i><el-badge :is-dot='item.readFlag==0?true:false'></el-badge></div>
                            <div class="text">
                                <div class="title">{{item.level.sendRealname}}的留言<span>{{item.level.createTime}}</span></div>
                                <div class="dsc" v-html="item.level.newsContent"></div>
                                <div class="replay" v-if="item.response"><span>平台回复：</span><span class="p" v-html="item.response.newsContent"></span></div>
                            </div>
                        </div>
                        <!-- 暂无数据 -->
                        <nodata v-if="list.length==0" />
                    </div>
                    <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="pageNo" :page-size='pageSize' :total="pageTotal" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <!-- 底部 -->
		<Footer />
    </div>
</template>

<script>
    import {announcement} from '@/api/api'
    import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import nodata from '@/components/nodata.vue'
    export default {
        //组件注入
        components: {Header,Footer,nodata},
        //存放数据
        data() {
            return {
                pageNo:1,//当前页码
                pageSize:4,//单页个数
                pageTotal:1,//总数
                list:[]
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            //切换页码
            handleCurrentChange(pageNo){
                this.pageNo = pageNo
                this.list = []
                this.getList();
            },
            //获取列表
            getList(){
                announcement({
                    'pageNo':this.pageNo,
                    'pageSize':this.pageSize,
                }).then(res =>{
                    if(res.code==200){
                        this.pageTotal = res.result.total
                        this.list = res.result.records
                    }
                });
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {},
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            //判断登录状态
            this.userLoginFlag()
            //获得列表
            this.getList()
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .PersonMessage1{background: #f6f6f6;
        .main{min-height: 500px;
            .banner{width: 100%;height: 120px;background: url('../../assets/person-bg.jpg') center no-repeat;background-size: cover;}
            .block{height: auto;overflow: hidden;margin-top: 30px;padding-bottom: 60px;
                .left{width: 270px;height: auto;overflow: hidden;background: #fff;padding-bottom: 25px;
                    .title{font-size: 18px;color: #333;font-weight: bold;padding: 25px 0;text-align: center;}
                    ul{height: auto;overflow: hidden;
                        li{line-height: 50px;font-size: 16px;color: #999;text-align: center;cursor: pointer;border-top: 1px solid #f6f6f6;position: relative;@include transition();
                            &.active{color: #E54437;
                                &:after{content: "";width: 4px;height: 50px;background: #E54437;position: absolute;left: 0;top: 0;}
                            }
                            &:hover{color: #E54437;}
                        }
                    }
                }
                .right{width: 900px;height: auto;overflow: hidden;
                    .list{height: auto;overflow: hidden;background: #fff;padding: 40px 50px;
                        .item{height: auto;border-bottom: 1px solid #eee;padding-bottom: 20px;margin-bottom: 20px;cursor: pointer;
                            .icon{width: 50px;height: 50px;line-height: 58px;border-radius: 50%;background: #DCB456;float: left;text-align: center;position: relative;margin-right: 20px;
                                i{font-size: 24px;color: #fff;}
                                .el-badge{position: absolute;right: 2px;top: 0;line-height: normal;}
                            }
                            .text{height: auto;overflow: hidden;
                                .title{font-size: 16px;color: #333;
                                    span{font-size: 14px;color: #999;margin-left: 10px;}
                                }
                                .dsc{font-size: 14px;color: #666;line-height: 24px;margin-top: 5px}
                                .replay{font-size: 14px;color: #666;width: 100%;height: auto;overflow: hidden;background: #f6f6f6;padding: 10px;margin-top: 10px;
                                    span{white-space: pre-wrap;color: #777;
                                        &.p{color: #666;word-wrap: break-word;}
                                    }
                                }
                            }
                            &:last-child{border: 0;padding: 0;margin: 0;}
                        }
                    }
                }
            }
        }
    }
</style>